<template>
    <div class="aside-left">
        <div class="aside-search">
            <el-input size="medium" v-model="menuSearch" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
        </div>
        <div class="aside-count">
            总数：<em name="numcount">{{this.leftMenuData.length}}</em>
            <el-button type="text" @click="manageWechat" title="管理" icon="fa fa-cog" circle></el-button>
            <el-button type="text" @click="addWechat" title="新增" icon="fa fa-plus" circle></el-button>
        </div>
        <div class="aside-menu xuehai-aside-menu" :style="{height: leftMenuHeight+'px'}">
            <el-menu @select="selectWechat"
                     :default-active="leftMenuDataActive"
                     class="el-menu aside-menu-ul xuehai-left-menu"
                     active-text-color="#1E83F0">
                <el-menu-item v-for="wechat in leftMenuData" :login="login" :ref="wechat.original_id" :key="wechat.id" :type="wechat.type" :account="wechat.original_id" :index="wechat.original_id">
                    <img :src="wechat.avatar" alt="">
                    <span v-if="wechat.type == 1" class="xuehai-left-menu-tag">服</span>
                    <span v-if="wechat.type == 2" class="xuehai-left-menu-tag">订</span>
                    <span v-if="wechat.type == 3" class="xuehai-left-menu-tag">小</span>
                    <span slot="title">{{wechat.name}}
                        <p>{{wechat.wechat ? wechat.wechat : '--'}}</p>
                    </span>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 新增公号 -->
        <el-dialog title="新增公众号"
                   top="15vh"
                   :visible.sync="addWechatFormDialog"
                   @open="resetForm('wechatForm')"
                   width="550px">
            <el-form :model="wechatForm" size="medium" :status-icon="true" :rules="rules" ref="wechatForm"
                     label-width="80px" class="demo-ruleForm">
                <el-form-item required label="类型：" prop="type">
                    <el-radio-group v-model="wechatForm.type">
                        <el-radio :label="1">服务号</el-radio>
                        <el-radio :label="2">订阅号</el-radio>
                        <el-radio :label="3">小程序</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item required label="账号：" prop="account">
                    <el-input v-model="wechatForm.account" placeholder="请填写微信公众号的邮箱账号"></el-input>
                </el-form-item>
                <el-form-item required label="密码：" prop="password">
                    <el-input v-model="wechatForm.password" placeholder="请填写微信公众号的密码"></el-input>
                </el-form-item>
                <el-form-item required label="认证：" prop="is_auth">
                    <el-switch v-model="wechatForm.is_auth" :active-value="1" :inactive-value="0"
                               active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
                </el-form-item>
                <el-form-item required label="名称：" prop="name">
                    <el-input v-model="wechatForm.name" placeholder="请填写微信公众号的名称"></el-input>
                </el-form-item>
                <el-form-item required label="原始ID：" prop="original_id">
                    <el-input v-model="wechatForm.original_id" placeholder="请填写微信公众号的原始ID"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addWechatFormDialog = false">取 消</el-button>
                <el-button type="primary" @click="postWechat('wechatForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {WechatUpdate} from '../../utils/axios';
    export default {
        props:['wechats','leftMenuHeight','login'],
        data() {
            return {
                menuSearch:'',//赛选
                leftMenuDataActive:'',//公众号选中
                leftMenuData:[],//公众号数据
                addWechatFormDialog:false,//新增公众号弹窗
                wechatForm:{
                    account:'',//账号
                    password: 'zjw123456',//密码
                    name: '',//名称
                    type: 1,//类型
                    is_auth: 1,//认证
                    original_id:'',//原始ID
                },
                rules:{
                    account: [
                        {required: true, message: '请填写微信公众号的邮箱账号', trigger: 'blur' },
                        {type:'email', message: '邮箱账号格式错误', trigger: 'blur'}
                    ],
                    password: [{required: true, message: '请填写微信公众号的密码', trigger: 'blur'}],
                    name: [{required: true, message: '请填写微信公众号的名称', trigger: 'blur'}],
                    original_id: [{required: true, message: '请填写微信公众号的原始ID', trigger: 'blur'}],
                },
                selectWechatValue:'',//选中公众号对象名称
            };
        },
        activated(){
            this.selectWechatValue = '';
        },
        created(){
            window['wechatGo'] = () => {
                this.wechatGo();
            };
        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            menuSearch: function (val) {
                if(val){
                    let news = [];
                    this.wechats.filter(function (item) {
                        if(item.name.indexOf(val) != -1 ){
                            news.push(item);
                        }
                    })
                    this.leftMenuData = news;
                }else{
                    this.leftMenuData = this.wechats;
                }
            },
            //公众号数据监控
            wechats:function (val) {
                this.leftMenuData = val;
                //this.defaultLefMenu();
            }
        },
        methods: {
            //默认选中一个
            defaultLefMenu(){
                this.$nextTick(()=>{
                    this.$refs['gh_1e1ed0b696c6'][0].$el.click();
                })
            },
            //点击事件
            wechatGo(){
                this.$nextTick(()=>{
                    this.$refs[this.selectWechatValue][0].$el.click();
                })
            },
            //管理公众号
            manageWechat(){
                this.$router.push({name:'Account'});
            },
            //微信左侧选择事件
            selectWechat(val){
                this.selectWechatValue = val;
                if(this.login == 0){
                    this.$emit("getWeChat",val);
                }
            },
            //新增公众号
            addWechat(){
                this.addWechatFormDialog = true;
            },
            //新增公众号提交
            postWechat(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        WechatUpdate(this.wechatForm).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.addWechatFormDialog = false;
                                        this.$emit("getWeChatAll");
                                    }
                                });
                            }
                        });
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
            },
        }
    };

</script>
